<template>
  <!-- 右侧公用按钮功能-导出-刷新 -->
  <div>
    <div style="font-size: 30px; display: inline-block; margin-right: 5px">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-upload" style="font-size:26px;color:black" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="currentexcel">导出excel</el-dropdown-item>
          <el-dropdown-item command="allexcel">导出全部excel</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div style="font-size:30px;display: inline-block;margin-right:5px">
      <a href="#" @click="refreshClick">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top" style="cursor:pointer" @click.native="refreshClick">
          <i class="el-icon-refresh-right" style="font-size:24px;color:black" />
        </el-tooltip>
      </a>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    // 刷新按钮
    refreshClick: {
      type: Function,
      required: true,
    },
    headersArr: {
      type: Array,
      required: true,
    },
    headersRelations: {
      type: Object,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    tableDataAll: {
      type: Array,
      required: true,
    },
  },
  methods: {
    // 导出excel操作
    async handleCommand(command) {
      // 导出当前页excel
      if (command === "currentexcel") {
        const dataArr = this.formatJson(
          this.tableData,
          this.headersArr,
          this.headersRelations
        );
        import("@/vendor/Export2Excel").then((excel) => {
          excel.export_json_to_excel({
            header: this.headersArr, // 表格的头部
            // 二维数组 [ [], [], [] ]
            data: dataArr,
            filename: this.$route.meta.title + "表格", // 导出的excel文件名
            autoWidth: true, // 是否开启单元格宽度自适应
            bookType: "xlsx", // 类型
          });
        });
      } else {
        // 导出全部excel
        // this.queryObj = { size: 10000 }
        // const res = await getmaintaskdataapi(this.queryObj)
        // const newtableData = res.data.data
        const dataArr = this.formatJson(
          this.tableDataAll,
          this.headersArr,
          this.headersRelations
        );
        import("@/vendor/Export2Excel").then((excel) => {
          excel.export_json_to_excel({
            header: this.headersArr, // 表格的头部
            // 二维数组 [ [], [], [] ]
            data: dataArr,
            filename: this.$route.meta.title + "总表", // 导出的excel文件名
            autoWidth: true, // 是否开启单元格宽度自适应
            bookType: "xlsx", // 类型
          });
        });
      }
      // this.$message('click on item ' + command)
    },

    // 将表头数据和数据进行对应
    formatJson(rows, headersArr, headersRelations) {
      // [
      //   [ 值1, 值2, 值3, ... ]
      // ]
      const resultsArr = rows.map((item) => {
        const arr = [];
        headersArr.forEach((key) => {
          const englishKey = headersRelations[key];
          arr.push(item[englishKey]);
        });
        return arr;
      });
      return resultsArr;
    },
  },
};
</script>

<style>
</style>
